<template>
    <div style="margin-top: 50px">
        <el-form :model="value" :rules="rules" ref="productInfoForm" label-width="120px" style="width: 600px" size="small">
            <el-form-item label="商品主图：" prop="mainImg">
                <el-upload
                        action="777"
                        :http-request="handlePostMimg"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        :auto-upload="false"
                        ref="upload"
                        name="imgUrl"
                        :limit="1"
                >
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item label="商品副图：" prop="subImg">
                <el-upload
                        class="upload-demo"
                        action="123"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        ref="upload1"
                        :before-remove="beforeRemove"
                        multiple
                        :http-request="handlePost"
                        :auto-upload="false"
                        :file-list="fileList"
                        list-type="picture">
                    <el-button size="small" type="primary">上传副图</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-form-item>
            <el-form-item style="text-align: center">
                <el-button type="primary" @click="submit()" style="margin-left: -400px;">确认上传</el-button>
            </el-form-item>
            <el-form-item style="text-align: center">
                <el-button size="medium" @click="handlePrev">上一步，填写商品属性</el-button>
                <el-button type="primary" size="medium" @click="handleFinishCommit">完成，提交商品</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "ProductUpdateImage",
        props: {
            value: Object,
        },
        data(){
            return{
                subImages:'',
                dialogVisible: false,
                dialogImageUrl: '',
                fileList: [],
                rules:{
                    mainImg: [{required: true, message: '请上传商品主图', trigger: 'blur'}],
                    subImg:[{required: true, message: '请上传商品副图', trigger: 'blur'}],
                },

            }
        },
        methods:{
            handlePostMimg(param){
                const formData = new FormData();
                formData.append('file', param.file);
                this.instance.post("/product/manage/fileUpload",formData).then(res=>{
                    //console.log(res.data);
                    this.value.mainImage=res.data.data.url;
                    //console.log(this.value.mainImage);
                })
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${file.name}？`);
            },
            handlePost(param) {
                this.subImages='';
                this.value.subImages='';
                const formData = new FormData();
                formData.append('file', param.file);
                this.instance.post("/product/manage/fileUpload",formData).then(res=>{
                    //console.log(res.data.data);
                    //console.log(res.data.data.url);
                    this.subImages=this.subImages+res.data.data.url+',';
                    // this.subImages = this.subImages.substring(0,this.subImages.length-1);
                    this.value.subImages =this.subImages;
                    //console.log(this.value.subImages);
                })

            },
            handlePrev() {
                this.$emit('prevStep')
            },
            handleFinishCommit(){
                this.$emit('finishCommit');
            },
            submit(res){
                this.$refs.upload.submit();
                this.$refs.upload1.submit();
            },
        }
    }
</script>

<style scoped>

</style>